import React from 'react';
import PageHeader from '@/components/PageHeader';
import ProTable from '@ant-design/pro-table';
import { ResponsiveGrid } from '@alifd/next';
import { tableColumns } from '@/pages/HealRecoQuery/table-columns';
import { requestMethod, useRequest } from '@/hooks/request';

const HealRecoQuery = () => {
  const store = sessionStorage.getItem('store');
  return (
    <ResponsiveGrid gap={20}>
      <ResponsiveGrid.Cell colSpan={12}>
        <PageHeader title="档案信息录入" breadcrumbs={[{ name: '档案信息管理' }, { name: '录入' }]} />
      </ResponsiveGrid.Cell>
      <ResponsiveGrid.Cell colSpan={12}>
        <ProTable
          scroll={{ x: 3800 }}
          columns={tableColumns}
          expandedRowRender={(record) => {
            const payments = record.payments;
            return (
              <table style={{ width: '650px', marginLeft: '45px' }}>
                <h3>缴费信息</h3>
                {payments.map((res, index) => {
                  return (
                    <tr key={`${record.id}-${index}`}>
                      <td>
                        名称：<b>{res.name}</b>
                      </td>
                      <td>
                        金额：<b>{res.amount}</b>
                      </td>
                      <td>
                        时间：<b>{res.date}</b>
                      </td>
                    </tr>
                  );
                })}
              </table>
            );
          }}
          request={async (params, sorter, filter) => {
            if (store) {
              params.storeIndex = store;
            }
            Object.entries(params).forEach((res) => {
              res[1] || delete params[res[0]];
            });
            const { data } = await useRequest({
              url: '/health-record',
              method: requestMethod.GET,
              params,
            });
            for (const res of data) {
              const { data: payments } = await useRequest({
                url: '/payment',
                method: requestMethod.GET,
                params: {
                  number: res.number,
                },
              });
              res.payments = payments;
            }

            return {
              data,
            };
          }}
          rowKey="id"
          dateFormatter="string"
        />
      </ResponsiveGrid.Cell>
    </ResponsiveGrid>
  );
};

export default HealRecoQuery;
